<template>
  <div class="orders-management">
    <h1>车辆订单管理</h1>
    <table>
      <thead>
      <tr>
        <th>订单编号</th>
        <th>下单人姓名</th>
        <th>电话</th>
        <th>购车意向金</th>
        <th>订单状态</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="order in orders" :key="order.id">
        <td>{{ order.id }}</td>
        <td>{{ order.name }}</td>
        <td>{{ order.telephone }}</td>
        <td>{{ order.price }}</td>
        <td>{{ getStatusText(order.status) }}</td>
        <td>
          <button @click="viewOrderDetails(order.id)">查看详情</button>
        </td>
      </tr>
      </tbody>
    </table>

    <!-- 分页组件 -->
    <Pagination
        :currentPage="currentPage"
        :total="totalOrders"
        :pageSize="pageSize"
        @update:currentPage="handlePageChange"
    />

    <!-- 订单详情模态框 -->
    <div v-if="selectedOrderDetails" class="order-details">
      <h2>订单详情</h2>
      <p>订单编号: {{ selectedOrderDetails.productsOrdersId }}</p>
      <p>车总价: {{ selectedOrderDetails.carPrice }}</p>
      <p>车颜色: {{ selectedOrderDetails.carColor }}</p>
      <p>车轮胎: {{ selectedOrderDetails.carWheel }}</p>
      <p>车座椅: {{ selectedOrderDetails.carSeat }}</p>
      <img :src="selectedOrderDetails.imgs" alt="车辆图片" class="car-image" />
      <button @click="closeDetails">关闭</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Pagination from '@/components/Pagination.vue';  // 引入分页组件

export default {
  data() {
    return {
      orders: [], // 订单列表
      selectedOrderDetails: null, // 当前选中的订单详情
      currentPage: 1, // 当前页码
      totalOrders: 0, // 订单总数
      pageSize: 5, // 每页显示的条目数
    };
  },
  mounted() {
    this.fetchOrders();
  },
  methods: {
    // 获取订单列表
    async fetchOrders() {
      try {
        const response = await axios.post('/admins/selectAllProductsOrders', {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
        });
        this.orders = response.data.records;
        this.totalOrders = response.data.total; // 获取订单总数
      } catch (error) {
        console.error('获取订单列表失败', error);
      }
    },
    // 查看订单详情
    async viewOrderDetails(orderId) {
      try {
        const response = await axios.post('/admins/selectAllProductsOrdersDetails', {
          pageNum: 1,
          pageSize: 1, // 获取单个订单详情
          productsOrdersId: orderId,
        });
        this.selectedOrderDetails = response.data.records[0];
      } catch (error) {
        console.error('获取订单详情失败', error);
      }
    },
    // 获取订单状态文本
    getStatusText(status) {
      switch (status) {
        case 1:
          return '未支付';
        case 2:
          return '已完成';
        case 3:
          return '已过期';
        default:
          return '未知状态';
      }
    },
    // 关闭订单详情
    closeDetails() {
      this.selectedOrderDetails = null;
    },
    // 处理页码变化
    handlePageChange(newPage) {
      this.currentPage = newPage;
      this.fetchOrders(); // 重新获取数据
    },
  },
  components: {
    Pagination,
  },
};
</script>

<style scoped>
.orders-management {
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

button {
  padding: 5px 10px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #2980b9;
}

.order-details {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 20px;
  margin-top: 20px;
}

.car-image {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}
</style>
